<template>
    <view class="container">
		
		<view class="user-section">
			<view class="user-info-box">
				<view class="portrait-box" @click="navTo('/pages/set/set')">
					<image class="portrait" :src="userInfo.avatar || '/static/missing-face.png'"></image>
					<view class="portrait-border"></view>
				</view>
				<view class="info-box">
					<text class="username">{{userInfo.nickname || '游客'}}</text>
					<br/>
					<view style="display: flex;margin-top: 20rpx;align-items: center;">
						<button class="setPhone" open-type="getPhoneNumber" @getphonenumber="bindPhone" v-if="userInfo.phone == ''">绑定手机号</button>
						<view class="setPhone" style="width: 100rpx;" v-else>ID: {{ userInfo.id }}</view>
					</view>
				</view>
				<view class="settings-btn" @click="navTo('/pages/set/set')">
					<uni-icons type="gear-filled" size="24" color="#fff"></uni-icons>
				</view>
			</view>
			<view class="vip-card-box" v-if="sysConfig.userVip == 1" :style='vipCardBg'>
				<view class="vip-header">
					<view class="vip-badge">V{{ levelInfo.level }}</view>
					<view class="vip-title">会员等级</view>
				</view>
				<view class="vip-progress">
					<progress :percent="vipPercent" stroke-width="6" activeColor="#FFD700" backgroundColor="rgba(255,255,255,0.3)" />
					<text class="progress-text">{{ userInfo.experience }}/{{ levelInfo.next_experience }}</text>
				</view>
			</view>
		</view>
		
		<view
			class="cover-container"
			:style="[{
				transform: coverTransform,
				transition: coverTransition
			}]"
			@touchstart="coverTouchstart"
			@touchmove="coverTouchmove"
			@touchend="coverTouchend"
		>
			
			<view class="stats-section">
				<view class="stat-card" @click="navTo('/pages/mine/balance')">
					<text class="stat-num">{{ userInfo.balance }}</text>
					<text class="stat-label">余额</text>
				</view>
				<view class="stat-card" v-if="sysConfig.coupon == 1">
					<text class="stat-num">{{ userInfo.couponNum }}</text>
					<text class="stat-label">优惠券</text>
				</view>
				<view class="stat-card" v-else>
					<text class="stat-num">{{ orderNum }}</text>
					<text class="stat-label">订单数</text>
				</view>
				<view class="stat-card" v-if="sysConfig.integral == 1">
					<text class="stat-num">{{ userInfo.integral }}</text>
					<text class="stat-label">积分</text>
				</view>
				<view class="stat-card" v-else>
					<text class="stat-num">{{ userCollection }}</text>
					<text class="stat-label">收藏数</text>
				</view>
			</view>
			
			<!-- 订单 -->
			<view class="order-card">
				<view class="card-header">
					<text class="card-title">订单中心</text>
					<view class="more-link" @click="navTo('/pages/order/order?status=-1')">
						<text>全部订单</text>
						<uni-icons type="right" size="14" color="#999"></uni-icons>
					</view>
				</view>
				<view class="order-section">
					<uni-badge :text="orderBar.unPaid" absolute="rightTop" size="small" :custom-style="badgeStyle">
						<view class="order-item" @click="navTo('/pages/order/order?status=2')">
							<view class="order-icon-wrapper">
								<uni-icons custom-prefix="iconfont" type="icon-daifukuan" size="28" color="#FF6B6B" class="order-icon"></uni-icons>
							</view>
							<text>待付款</text>
						</view>
					</uni-badge>
					<uni-badge :text="orderBar.unExpress" absolute="rightTop" size="small" :custom-style="badgeStyle">
						<view class="order-item" @click="navTo('/pages/order/order?status=3')">
							<view class="order-icon-wrapper">
								<uni-icons custom-prefix="iconfont" type="icon-daifahuo" size="28" color="#4ECDC4" class="order-icon"></uni-icons>
							</view>
							<text>待发货</text>
						</view>
					</uni-badge>
					<uni-badge :text="orderBar.unReceive" absolute="rightTop" size="small" :custom-style="badgeStyle">
						<view class="order-item" @click="navTo('/pages/order/order?status=4')">
							<view class="order-icon-wrapper">
								<uni-icons custom-prefix="iconfont" type="icon-daishouhuo" size="28" color="#45B7D1" class="order-icon"></uni-icons>
							</view>
							<text>待收货</text>
						</view>
					</uni-badge>
					<uni-badge :text="orderBar.unAppraise" absolute="rightTop" size="small" :custom-style="badgeStyle">
						<view class="order-item" @click="navTo('/pages/order/order?status=0')">
							<view class="order-icon-wrapper">
								<uni-icons custom-prefix="iconfont" type="icon-daipingjia" size="28" color="#FFA07A" class="order-icon"></uni-icons>
							</view>
							<text>待评价</text>
						</view>
					</uni-badge>
					<uni-badge :text="orderBar.refund" absolute="rightTop" size="small" :custom-style="badgeStyle">
						<view class="order-item" @click="navTo('/pages/refund/refundList')">
							<view class="order-icon-wrapper">
								<uni-icons custom-prefix="iconfont" type="icon-shouhou" size="28" color="#98D8C8" class="order-icon"></uni-icons>
							</view>
							<text>退款/售后</text>
						</view>
					</uni-badge>
				</view>
			</view>
			
			<!-- 我的服务 -->
			<view class="services-card">
				<view class="card-header">
					<text class="card-title">我的服务</text>
				</view>
				<view class="user-menus">
					<view class="user-item" @click="navTo('/pages/coupon/index')" v-if="sysConfig.coupon == 1">
						<view class="menu-icon-wrapper coupon-bg">
							<uni-icons custom-prefix="iconfont" type="icon-youhuiquan" size="26" color="#FF6B6B"></uni-icons>
						</view>
						<text>我的卡券</text>
					</view>
					<view class="user-item" @click="navTo('/pages/address/address')">
						<view class="menu-icon-wrapper address-bg">
							<uni-icons custom-prefix="iconfont" type="icon-dizhi" size="26" color="#e93939"></uni-icons>
						</view>
						<text>我的地址</text>
					</view>
					<view class="user-item" @click="navTo('/pages/order/order?status=2')" v-if="sysConfig.integral == 1">
						<view class="menu-icon-wrapper integral-bg">
							<uni-icons custom-prefix="iconfont" type="icon-jifen" size="26" color="#FFA07A"></uni-icons>
						</view>
						<text>积分记录</text>
					</view>
					<view class="user-item" @click="navTo('/pages/user/collection')">
						<view class="menu-icon-wrapper collection-bg">
							<uni-icons custom-prefix="iconfont" type="icon-shoucang" size="26" color="#73d13d"></uni-icons>
						</view>
						<text>我的收藏</text>
					</view>
					<view class="user-item" @click="navTo('/pages/mine/balance')">
						<view class="menu-icon-wrapper balance-bg">
							<uni-icons type="wallet-filled" size="26" color="#fadb14"></uni-icons>
						</view>
						<text>我的余额</text>
					</view>
					<view class="user-item" @click="navTo('/pages/set/set')">
						<view class="menu-icon-wrapper settings-bg">
							<uni-icons custom-prefix="iconfont" type="icon-shezhi" size="26" color="#d46b08"></uni-icons>
						</view>
						<text>设置</text>
					</view>
					<view class="user-item" @click="navTo('/pages/agent/index')" v-if="userInfo.is_agent == 1">
						<view class="menu-icon-wrapper agent-bg">
							<uni-icons type="paperplane-filled" size="26" color="#003a8c"></uni-icons>
						</view>
						<text>我的推广</text>
					</view>
				</view>
			</view>
		</view>
		<view class="copyright">本系统由 SparkShop 强力驱动</view>
    </view>
</template>
<script>  
	import store from '@/store';
	import {
		goLogin,
		checkLogin
	} from '@/libs/login';
	import { onTabPageShow } from '@/utils/tabbar.js';
	let startY = 0, moveY = 0, pageAtTop = true;
    export default {
		data() {
			return {
				orderBar: {
					unPaid: 0,
					unExpress: 0,
					unReceive: 0,
					unAppraise: 0,
					refund: 0,
				},
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				userInfo: {
					id: 0,
					avatar: "",
					nickname: ""
				},
				vipPercent: '',
				levelInfo: {},
				vipCardBg: '',
				sysConfig: {},
				userCollection: 0,
				orderNum: 0,
				badgeStyle: {'background': '#fff', 'border': '1px solid #e93323', 'color': '#e93323', 'top': '-2px', 'right': '2px'}
			}
		},
		onLoad() {
		},
		onShow() {
			// 页面显示时更新tabbar状态
			onTabPageShow();
			
			this.getUserInfo()
			this.getUserBaseInfo()
			
			// #ifdef MP-WEIXIN
			// 微信小程序环境下，确保 tabbar 正确显示当前选中状态
			try {
				const app = getApp();
				if (app && typeof app.getTabBar === 'function' && app.getTabBar()) {
					const tabbar = app.getTabBar();
					tabbar.setData({
						selected: 3 // 用户页面对应的索引
					});
					tabbar.getCartCount && tabbar.getCartCount();
				}
			} catch (e) {
				console.log('更新用户页 tabbar 状态失败', e);
			}
			// #endif
		},
        methods: {
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url) {
				if(!this.isLogin) {
					goLogin();
				}
				
				uni.navigateTo({  
					url
				})
			}, 
			// 获取用户信息
			async getUserInfo() {
				// 登录过期自动登录
				this.isLogin = this.$store.getters.isLogin
				if (!this.isLogin) {
					goLogin();
				}
			},
			// 获取用户基础信息
			async getUserBaseInfo() {
				let res = await this.$api.user.getUserBaseInfo.get()
				this.sysConfig = res.data.config
				this.userCollection = res.data.userCollection
				this.orderNum = res.data.orderNum
				this.orderBar = res.data.orderBar
				
				if (this.sysConfig.userVip == 1) {
					if (res.data.levelInfo.level == 0) {
						this.vipCardBg = 'background: linear-gradient(-90deg,#e7b667,#ffeab5);'
					} else {
						this.vipCardBg = 'background: url(' + res.data.levelInfo.card_bg + ') no-repeat center;'
					}
				}
				
				this.levelInfo = res.data.levelInfo
				this.userInfo = res.data.userInfo
				
				let percent = 0
				if (this.levelInfo.next_experience > 0) {
					percent = (this.userInfo.experience / this.levelInfo.next_experience).toFixed(2)
				}
				
				this.vipPercent = percent > 1 ? 100 : percent * 100
			},
			
			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if(moveDistance < 0){
					this.moving = false;
					return;
				}
				
				this.moving = true;
				if(moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}
		
				if(moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if(this.moving === false) {
					return;
				}
				
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			},
			// 绑定手机号
			async bindPhone(data) {
				if (data.errMsg) {
					this.$tool.msg('小程序权限错误:' + data.errMsg);
					return;
				}
				
				if (data.detail.errMsg != 'getPhoneNumber:ok') {
					console.log('用户拒绝了', data)
					return;
				}
				
				let res2 = await this.$api.user.bindPhone.post({
					code: data.detail.code
				})
				uni.hideLoading();
				if (res2.code == 0) {
					this.$tool.msg('绑定成功');
					this.getUserBaseInfo()
				} else {
					this.$tool.msg(res2.msg);
				}
			}
        }  
    }  
</script>  
<style lang='scss'>
	page {
		width: 100%;
		height: 100%;
		position: absolute;
		background: #f4f4f4;
	}
	
	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 16upx;
		box-shadow: 0 4upx 20upx rgba(0, 0, 0, 0.08);
	}
	
	.container {
		height: 100%;
		width: 100%;
		position: relative;
		overflow: hidden;
		padding-bottom: 50rpx; /* 减少底部间距避免被自定义tabBar遮挡 */
	}
	
	.user-section {
		height: 520upx;
		padding: 80upx 30upx 20upx;
		position: relative;
		background: #e93939;
		overflow: hidden;
		border-bottom-left-radius: 40upx;
		border-bottom-right-radius: 40upx;
	}
	
	.user-info-box {
		height: 200upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 2;
		
		.portrait-box {
			position: relative;
			margin-right: 30upx;
			
			.portrait {
				width: 140upx;
				height: 140upx;
				border-radius: 50%;
				border: 4upx solid rgba(255, 255, 255, 0.8);
				box-shadow: 0 8upx 16upx rgba(0, 0, 0, 0.2);
				transition: all 0.3s ease;
			}
			
			.portrait-border {
				position: absolute;
				top: -8upx;
				left: -8upx;
				right: -8upx;
				bottom: -8upx;
				border-radius: 50%;
				border: 2upx solid rgba(255, 255, 255, 0.3);
				animation: pulse 2s infinite;
			}
			
			@keyframes pulse {
				0% { transform: scale(1); opacity: 1; }
				50% { transform: scale(1.05); opacity: 0.7; }
				100% { transform: scale(1); opacity: 1; }
			}
		}
		
		.info-box {
			flex: 1;
			
			.username {
				font-size: 36upx;
				color: #fff;
				font-weight: 600;
				margin-bottom: 16upx;
				text-shadow: 0 2upx 4upx rgba(0, 0, 0, 0.2);
			}
			
			.user-meta {
				display: flex;
				align-items: center;
				margin-top: 8upx;
			}
		}
		
		.settings-btn {
			width: 60upx;
			height: 60upx;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.2);
			display: flex;
			align-items: center;
			justify-content: center;
			backdrop-filter: blur(10upx);
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.95);
				background: rgba(255, 255, 255, 0.3);
			}
		}
	}
	
	.vip-card-box {
		display: flex;
		flex-direction: column;
		color: #fff;
		background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
		height: 240upx;
		overflow: hidden;
		position: relative;
		padding: 30upx;
		border-radius: 20upx;
		margin-top: 30upx;
		box-shadow: 0 10upx 30upx rgba(255, 165, 0, 0.3);
		
		.vip-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20upx;
			
			.vip-badge {
				background: rgba(255, 255, 255, 0.3);
				padding: 8upx 20upx;
				border-radius: 30upx;
				font-weight: 700;
				font-size: 28upx;
				backdrop-filter: blur(10upx);
			}
			
			.vip-title {
				font-size: 32upx;
				font-weight: 600;
			}
		}
		
		.vip-progress {
			margin-top: 30upx;
			
			.progress-text {
				font-size: 24upx;
				margin-top: 10upx;
				opacity: 0.9;
			}
		}
		
	}
	
	.cover-container {
		background: transparent;
		margin-top: -120upx;
		padding: 0 30upx;
		position: relative;
		padding-bottom: calc(20upx + 50rpx); /* 减少底部间距避免被自定义tabBar遮挡 */
		z-index: 3;
	}
	
	
	.stats-section {
		@extend %section;
		padding: 40upx 20upx;
		margin-top: 20upx;
		display: flex;
		justify-content: space-between;
		
		.stat-card {
			@extend %flex-center;
			flex: 1;
			padding: 20upx 10upx;
			border-radius: 16upx;
			background: #fff;
			box-shadow: 0 6upx 20upx rgba(0, 0, 0, 0.08);
			margin: 0 8upx;
			transition: all 0.3s ease;
			position: relative;
			overflow: hidden;
			
			&:active {
				transform: translateY(-4upx);
				box-shadow: 0 8upx 25upx rgba(0, 0, 0, 0.15);
			}
			
			.stat-icon {
				width: 60upx;
				height: 60upx;
				border-radius: 16upx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 16upx;
				background: #f4f4f4;
			}
			
			.stat-num {
				font-size: 32upx;
				font-weight: 700;
				color: #333;
				margin-bottom: 8upx;
			}
			
			.stat-label {
				font-size: 24upx;
				color: #999;
			}
		}
	}
	
	.order-card, .services-card {
		background: #fff;
		border-radius: 20upx;
		margin-top: 20upx;
		padding: 30upx;
		box-shadow: 0 8upx 30upx rgba(0, 0, 0, 0.06);
		
		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30upx;
			
			.card-title {
				font-size: 32upx;
				font-weight: 600;
				color: #333;
			}
			
			.more-link {
				display: flex;
				align-items: center;
				color: #999;
				font-size: 26upx;
				transition: all 0.3s ease;
				
				&:active {
					color: $uni-color-primary;
				}
			}
		}
	}
	
	.order-section {
		@extend %section;
		padding: 0;
		background: transparent;
		box-shadow: none;
		
		.order-item {
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 16upx;
			font-size: 24upx;
			color: #666;
			transition: all 0.3s ease;
			position: relative;
			
			&:active {
				transform: scale(0.95);
				background: rgba(0, 0, 0, 0.02);
			}
			
			.order-icon-wrapper {
				width: 60upx;
				height: 60upx;
				border-radius: 16upx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 12upx;
				background: #f4f4f4;
				transition: all 0.3s ease;
			}
			
			&:active .order-icon-wrapper {
				background: rgba(0, 0, 0, 0.06);
			}
		}
	}
	
	.user-menus {
		display: flex;
		flex-wrap: wrap;
		padding: 0;
		
		.user-item {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			width: 25%;
			margin-bottom: 40upx;
			font-size: 24upx;
			color: #666;
			transition: all 0.3s ease;
			
			&:active {
				transform: scale(0.95);
			}
			
			.menu-icon-wrapper {
				width: 60upx;
				height: 60upx;
				border-radius: 16upx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 12upx;
				background: #f4f4f4;
				transition: all 0.3s ease;
			}
		}
	}
	
	.setPhone {
		display: inline-block;
		font-size: 18rpx;
		background-color: rgba(255, 255, 255, 0.5);
		border-radius: 20rpx;
		color: #fff;
		margin-left: 10rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		padding: 0 16rpx;
		transition: all 0.3s ease;
		
		&:active {
			background-color: rgba(255, 255, 255, 0.35);
		}
	}
	
	.copyright {
		font-size: 24upx;
		color: #999;
		text-align: center;
		padding: 40upx 0;
		position: relative;
		z-index: 1;
	}
	
	.badgeStyle {
		background: #fff;
		border: 1px solid $uni-color-primary;
		color: $uni-color-primary;
		top: -2px;
		right: 2px;
		box-shadow: 0 2upx 8upx rgba($uni-color-primary, 0.3);
	}
</style>